<template>
  <div>
   <el-button type="primary" icon="el-icon-arrow-left" @click="back">上一页</el-button>
    <el-card class="box-card wrap">
      <div slot="header" class="clearfix">
        <span>{{DetailUserName}}</span>
        <el-button  style="float: right; padding: 3px 0" icon="el-icon-edit" type="text">编辑</el-button>
      </div>
      <div v-for="(value,key) in Blogs" :key="key" class="text item" >
        {{value.title }}
      </div>
      <p v-show="!Blogs.length">该顾客没有发表过博客</p>
</el-card>
    

  </div>
</template>

<script>
  export default {
    name: "Detail",
    data() {
      return {
        Blogs:{},
        DetailUserName:''
      }
    },
    methods: {
      init (e) {
         const _this = this
          this.DetailUserName= this.$store.getters.getUser.username
        this.$axios.get("/blog/search/userId=" + this.DetailUserName).then(res => {
          _this.Blogs = res.data.data
          console.log(_this.Blogs)
      })
    },
    back () {
      this.$router.back(-1)}
    },
    mounted () {
      this.init()
    }
    }
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
  .wrap {
    margin: 100px auto 0;
    margin: 0;
  }

</style>